<template>
	<view>
		<scroll-view :scroll-top="scrollTop" scroll-y class="" @scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll">
			<view v-for="bookInfo in readHistoryList" :key="bookInfo.showDate" class="book-info">
				<uni-section :title="bookInfo.showDate" titleColor="#999">
					<template v-slot:right>
						<text style="color: #999;">共读了[{{bookInfo.total}}]本书</text>
					</template>
				</uni-section>
				<uni-grid :column="4" :square="false" :highlight="false" :show-border="false" @change="change">
					<uni-grid-item v-for="(book, index) in bookInfo.bookList" :index="index" :key="index">
						<view class="item">
							<image :src="book.imgSrc" class="item-img"></image>
							<text class="item-process">{{book.process}}%</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const scrollTop = ref(0)

	const readHistoryList = ref(Array(10).fill(0).map((_, i) => {
		return {
			showDate: `${i + 1}月,2024`,
			data: '2024-11-13 12:24:08',
			total: 16,
			bookList: Array(8).fill(0).map((_, index) => {
				return {
					id: index,
					imgSrc: '../../../static/image/page.png',
					process: index * 10
				}
			})
		}
	}))


	function upper(e) {
		console.log(e)
	}

	function lower(e) {
		console.log(e)
	}
	function scroll(e) {
		console.log(e)
		this.old.scrollTop = e.detail.scrollTop
	}

	function change(e) {
		let {
			index
		} = e.detail

		uni.showToast({
			title: `点击第${index + 1}个宫格`,
			icon: 'none'
		})
	}
</script>

<style lang="scss" scoped>
	.book-info {
		border-top: 1rpx solid #999;
	}

	.item {
		display: inline-block;
		width: 165rpx;
		margin: 24rpx;

		&-img {
			width: 140rpx;
			height: 160rpx;
			margin-bottom: 10rpx;
			display: block;
			color: $uni-text-color;
		}

		&-process {
			width: 140rpx;
			display: block;
			text-align: center;
		}

	}
</style>